<template>
  <div class="tradingViewWrap">
    <div id="swTradingView" :style="{width: '100%', height: height + 'px'}"></div>
    <div class="loading" v-show="isShowLoading"></div>
    <img :src="klineWaterMark" class="watermark" v-if="klineWaterMark">
  </div>
</template>

<script>
import tradingView from './../js/tradingView.js'
import Utils from '@/utils/Utils.js'
import $ from 'jquery'
import EventBus from '@/service/EventBus.js'
import {mapGetters} from 'vuex'

export default {
  name: 'TradingView',
  props: [
    'langKey',
    'lang',
    'winMinHeight'
  ],
  data () {
    return {
      pair: {},
      tradingViewHandle: null,
      height: '60%',
      isShowLoading: false
    }
  },
  computed: {
    ...mapGetters({
      customInfo: 'customInfo'
    }),
    // K线图背景水印
    klineWaterMark: function () {
      return this.customInfo.WaterMark3 ? this.customInfo.WaterMark3 : require('../images/kline-logo.png')
    }
  },
  watch: {
    langKey () {
      this.tradingViewHandle.setLanguage(this.langKey)
    }
  },
  methods: {
    init () {
      let TradingViewWidget = global.TradingView.widget
      this.tradingViewHandle = tradingView.run({
        defaultResolution: '60',
        language: this.langKey,
        TradingViewWidget: TradingViewWidget,
        pair: this.pair,
        beforeSwitchPair: () => {
          this.isShowLoading = true
        },
        afterSwitchPair: () => {
          this.isShowLoading = false
        }
      })
    },
    resize () {
      /*
      let winHeight = $(window).innerHeight()
      // if (winHeight < this.winMinHeight) {
      //   winHeight = this.winMinHeight
      // }
      let headHeight = $('.pageHead').outerHeight()
      let tradingPairHeight = $('.tradingPair').outerHeight()
      let tabTitleHeight = $('.tradingRecord .tabTitle').outerHeight()
      let toolsHeight = $('.tradingRecord .tools').outerHeight()
      let thHeight = 30
      this.height = (winHeight - headHeight - tradingPairHeight - tabTitleHeight - toolsHeight - thHeight) * 0.7
      */
      // tradingView和orderBook同高
      this.height = $('.orderBook').height()
    }
  },
  created () {
    EventBus.$on('readyOrderBookHeight', this.resize)

    EventBus.$on('pushKline', (kline) => {
      try { // 应付EDGE的报错
        // console.log('latestOneKline', nv, this.tradingViewHandle.lineType)
        for (let i = 0; i < kline.length; i++) {
          if (kline[i].LineType === this.tradingViewHandle.lineType) {
            kline[i].DealDate = kline[i].DealDate.replace('T', ' ') // 暂时修复推送时间带T
            // Utils.setUTCWithArray([kline[i]], 'DealDate')
            kline = {
              time: (Utils.fixNewDateForIE(kline[i].DealDate)).getTime(),
              close: kline[i].Closed,
              open: kline[i].Opened,
              high: kline[i].Highest,
              low: kline[i].Lowest,
              volume: kline[i].DNum
            }
            break
          }
        }
        // console.log('latestOneKline2', kline, new Date(kline.time))
        global.TradingData.push(kline)
        this.tradingViewHandle.onRealtimeCallback && this.tradingViewHandle.onRealtimeCallback(kline) // 写这个判断是因为可能推送快过tv初始化
      } catch (err) {
        // console.log(err)
      }
    })

    EventBus.$on('switchPair', (pair) => {
      this.pair = pair
      this.init()
    })
  },
  mounted () {
  }
}
</script>

<style lang="less">
@import "./../../../mixins.less";

@red: #d72727;
@green: #54a84e;
@white: #b5b8c0;

.tradingPage {

  .tradingViewWrap {
    position: relative;

    .loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: #191f2b;

      img {
        vertical-align: middle;
      }
    }
    .watermark {
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -150px;
      opacity: 0.6;
      pointer-events: none;
    }
  }

  .tradingViewTools {
    .mix-clearfix;
    padding-bottom: 8px;

    .btn {
      float: left;
      margin-right: 6px;
      padding: 0 8px;
      height: 30px;
      width: auto;
      line-height: 30px;
      font-size: 12px;
      color: #7b86af;
      background-color: #10111b;

      .active {
        color: #bbb;
        background-color: #505b82;
      }
    }
  }
}
</style>
